<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关联子系统用户</title>
</head>
<body>
    <div th:fragment="main" id="connectedUser" class="connectedUser">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .connectedUser {
                margin: 5px;
                padding: 0 15px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                overflow: auto;
                box-shadow: 0px 1px 5px #333;
            }
            .connectedUser .title {
                padding: 18px 0px 10px;
                height: 65px;
                border-bottom: 1px solid #DDD;
                font-size: 14px;
            }
            .connectedUser .title .title-content {
                margin: 0;
                padding: 5px 10px;
                list-style: none;
                color: #000;
                background-color: #fff;
                border-radius: 0;
                border-left: 2px solid #88B7E0; 
            }
            .connectedUser .title .title-content li>a {
                color: #000;
            }
            .connectedUser .title .title-content li>a:hover {
                color: #88B7E0;
            }
            .associated-info {
                margin-top: 16px;
            }
            .associated-info .associated-content {
                padding: 0px 12px 5px 10px;
            }
            .associated-info .alert-title {
                font-weight: bold;
                margin-bottom: 10px; 
                padding: 12px 12px;
                border: 1px solid transparent;
                border-radius: 0px;
                color: #4892dc;
                background-color: #eaf4fe;
                border-color: #eaf4fe;
            }
            .alert-info {
                padding: 5px 12px;
                margin-bottom: 5px;
                border: 1px solid transparent;
                border-radius: 0px;
                color: #555;
                background-color: #F9F9F9;
                border-color: #F9F9F9;
            }
            .alert-info b {
                color: #4892dc;
            }
            .alert-info span i {
                color:#F00;
            }
            .associated-info .table {
                margin-bottom: 10px;
            }
            .associated-table {
                margin-bottom: 10px;
            }
            .associated-info .table .table-head tr {
                background-color: #EFEFEF;
            }
            .associated-info .table th,td {
                text-align: center;
            }
            .SS-list {
                margin-top: 15px;
                padding: 5px 20px 0;
                overflow: hidden;
            }
            .SS-list .list-item {
                float: left;
                width: 200px;
                margin-bottom: 20px;
            }
            .acc-left {
                width: 62px;
                text-align: center;
                float: left;
            }
            .avatar-ctn {
                width: 56px;
                height: 56px;
                padding-top: 5px;
                overflow: hidden;
            }
            .avatar-ctn img {
                width: 46px;
                height: 46px;
            }
            .acc-right-cw {
                float: left;
                width: 120px;
                margin-top: 9px;
                word-wrap: break-word;
                word-break: break-all;
            }
            .acc-right .name {
                color: #333;
                display: block;
                position: relative;
            }
            .acc-bind-link {
                display: inline-block;
                margin-top: 5px;
                color: #2b78e4;
            }
            .acc-bind-link:hover, .acc-bind-link:focus {
                color: #1d61ad;
            }
            
            /*返回按钮  */
            .back { 
                display: inline-block;
                float: right;
                position: relative;
                margin-right: 10px; 
                width: 40px; 
                height: 28px; 
                line-height: 28px; 
                text-align: center; 
                color: #fff;
                background: #337ab7; 
                border: 1px solid #337ab7; 
                border-left: none;
                border-radius: 5px;  
            }
            .back:after{ 
                position: absolute; 
                content: " "; 
                border: transparent 13px solid;  
                border-width:  12px 8px; 
                border-right-color: #337ab7; 
                top: 1px; 
                left: -15px; 
                height: 0; 
                width: 0; 
            }
            .back:hover {
                background: #286090; 
            }
            .back:hover:after {
                border-right-color: #286090;
            }
            /*用户模态框  */
            .modal-body {
                padding: 5px;
            }
            .SSuserList .modal-title {
                font-size: 16px;
            }
            /*jqgrid表格样式  */
            .ui-jqgrid .ui-jqgrid-htable tr>:first-child input {
                display: none;
            }
        </style>
        <div class="title">
            <ol class="breadcrumb title-content pull-left">
                <li><a href="#platform-userGroup-user">用户管理</a></li>
                <li>关联子系统用户</li>
            </ol>
            <a href="#platform-userGroup-user" class="back">返回</a>
        </div>
        <div class="associated-info">
            <ul class="associated-content">
                <li class="associated-table">
                    <h3 class="alert-title">已关联的子系统用户</h3>
                    <div class="alert-info">
                        <b>提醒：</b>
                        <span class="alert-content">增加或者删除账号关联关系后，记得点击&nbsp;<i>保存</i>&nbsp;按钮。</span>
                    </div>
                    <table class="table table-bordered table-striped table-hover">
                        <thead class="table-head">
                            <tr>
                                <th>系统名称</th>
                                <th>登录名称</th>
                                <th>用户名称</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="table-body" id="tableBody">
                            
                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <input class="btn btn-primary" id="saveConnectedUser" type="button" value="保存关联">
                    </div>
                </li>
                <li>
                    <h3 class="alert-title">添加子系统用户关联关系</h3>
                    <div class="alert-info">
                        <b>提醒：</b>
                        <span class="alert-content"><i>每个子系统只能够关联一个账号！</i></span>
                    </div>
                    <ul class="SS-list" id="SS-list">
                        <!--子系统列表 -->
                    </ul>
                </li>
            </ul>
        </div>

        <!--子系统用户列表  -->
        <div class="modal fade SSuserList" tabindex="-1" role="dialog" id="SSuserList">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="modal-title">用户列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="operation-table" id="operation-table">
                            <table id="userList"></table>
                            <div id="gridpager"></div> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary addUser" id="addUser">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            var userDatas = JSON.parse($.cookie("userData"));
            var SSData;
            //获取子系统数据
            function getSSname() {
                $.ajax({
                    url: contextPath + '/SubSystem/querySubSystem',
                    type:"get",
                    contentType:"application/json",
                    dataType:"json",
                    async: false,
                    success:function(data){
                    	SSData = data;
                        var SSlist = '';
                        for(var i = 0,len = data.length; i < len; i++){
                            SSlist += 
                                '<li class="clearfix list-item list-item-thirdParty">' +
                                    '<div class="acc-left">' +
                                        '<div class="avatar-ctn">' +
                                            '<img src="'+ contextPath +'/images/subsystem/'+ data[i].icourl +'.png" alt="'+ data[i].name +'" title="'+ data[i].name +'">' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="acc-right acc-right-cw">' +
                                        '<span class="name">'+ data[i].name +'</span>' +
                                        '<a class="acc-bind-link correlation" href="#SSuserList" data-id="'+ data[i].id +'" data-toggle="modal" data-target="#SSuserList">[关联帐号]</a>' +
                                    '</div>' +
                                '</li>';
                        }
                        $("#SS-list").html(SSlist);
                    },
                    error:function(){
                        toastr.error('获取子系统信息失败！','操作失败');
                    }
                });
            }
            getSSname(); 

            var SSArr = [];
            for(var i = 0,len = SSData.length; i < len; i++){
                var obj = {};
                obj.id = SSData[i].id;
                obj.name = SSData[i].name;
                SSArr[i] = obj;
            }
            function SSname( id ) {
                for(var i = 0,len = SSArr.length; i <　len; i++){
                    if(id == SSArr[i].id){
                        return SSArr[i].name;
                    }
                }
                return "未知子系统";
            }

            // 获取关联的子系统用户
            var datas;
            function getSSuser() {
                $.ajax({
                    url: contextPath + "/user/querySubSystemUsersByUserId/" + userDatas.id,
                    type: "get",
                    cache: false,
                    dataType: "json",
                    success: function (info) {
                        if(info.code == 1){
                            datas = info.data;
                            userTable( datas );
                        }else{
                            toastr.error('获取用户信息失败！');
                        }
                    },
                    error: function () {
                        toastr.error("获取失败，请稍后再试！");
                    }
                });
            }
            function userTable( data ) {
                var tr_str = '';
                for(var i = 0,len = data.length; i < len; i++) {
                    tr_str += 
                        '<tr>'+
                            '<td>' + SSname(data[i].subSystem) + '</td>'+
                            '<td>' + data[i].username + '</td>'+
                            '<td>' + data[i].displayName + '</td>'+
                            '<td><button type="button" class="btn btn-danger btn-xs del" data-id="'+ i +'">删除</button></td>'+
                        '</tr>';
                }
                $("#tableBody").html(tr_str);
            }
            getSSuser(); 
            // 删除关联用户
            $("#tableBody").on('click','.del',function( ) {
                
                var thisId = $(this).attr('data-id');
                datas.splice(thisId,1);
                userTable(datas);
            })

            // 子系统用户表格
            function pageInit(){
                //创建jqGrid组件
                jQuery("#userList").jqGrid({
                    datatype : "local",
                    height: 230,
                    width: 587,
                    colNames:['用户ID','登录名称','用户名称','系统名称'],
                    colModel:[
                        {name:'id',index:'id', sorttype:"int",hidden:true,align:'center'},
                        {name:'username',index:'username',align:'center'},
                        {name:'displayName',index:'displayName',sorttype:"string",align:'center'},
                        {name:'subSystem',index:'subSystem',sorttype:"string",align:'center',hidden:true}
                    ],
                    sortname:'id',
                    sortorder:'asc',
                    viewrecords: true,
                    multiselect: true,
                    multiboxonly: true,
                    rowNum: 20,
                    rowList:[5,10,20],
                    pager:"#gridpager"
                });
                /*创建jqGrid的操作按钮容器*/
                jQuery("#userList").jqGrid('navGrid', '#gridpager', {edit: false,add: false, del:false,search: false});
            };
            pageInit();
            $("#SS-list").on('click','.correlation',function(){
                var userData;
                var systemid = $(this).attr('data-id');
                jQuery("#userList").jqGrid('clearGridData');
                var systemName = SSname(systemid);
                $("#modal-title").html(systemName + '&nbsp;用户列表');
                $.ajax({
                    url: contextPath + "/user/querySubSystemUsersBySystemId/"+ systemid,
                    type: "get",
                    cache: false,
                    dataType: "json",
                    success: function(info){
                        if(info.code == 1) {
                            userData = info.data;
                            for ( var i = 0,len = userData.length; i <= len; i++){
                                jQuery("#userList").jqGrid('addRowData', i + 1, userData[i]);
                            }
                        }
                    },
                    error: function(data){
                        toastr.error("请求失败，请稍后再试!");
                    }
                });
            });
            //  关联用户
            $("#SSuserList").on('click','#addUser',function(){
                var id = $("#userList").jqGrid('getGridParam','selrow');
                var rowData = $("#userList").jqGrid("getRowData",id);
                var repeated = true;
                for(var i = 0,len = datas.length; i < len; i++){
                    if( rowData.subSystem == datas[i].subSystem) {
                        toastr.error("您已经关联过此系统的用户，不能再次关联！");
                        repeated = false;
                    }
                }
                if(repeated && rowData.id){
                    datas.push(rowData);
                    userTable(datas);
                    $('#SSuserList').modal('hide');
                }else if(!rowData.id){
                    toastr.error("请选择关联用户！");
                }
            });

            // 保存关联
            $("#saveConnectedUser").on('click',function() {
                var userData = {};
                    userData.id = userDatas.id;
                    userData.subsystemUsers = datas;
                $.ajax({
                    url: contextPath + '/user/updateSubsystemUserMapping',
                    type: 'POST',
                    data: JSON.stringify(userData),
                    contentType: "application/json",
                    success: function (data) {
                        if(data.code == 1){
                            toastr.success('保存成功！');
                            location.hash = "platform-userGroup-user";
                        }else{
                            toastr.error('保存失败！');
                        }
                    },
                    error: function () {
                        toastr.error("操作失败，请稍后再试！");
                    } 
				});
            });
        </script>
    </div>
</body>
</html>